<!-- 姓氏谐音卡通情侣 -->
<template>
  <scroll-view 
    class="preview-wrap"
    :scroll-x="true"
    :style="{
      height: windowWidth + 'px', 
      'line-height': windowWidth + 'px',
      'font-family': currentFont,
      'font-size': fontSize + 'px'
    }"
   >
    <view 
     class="preview-inner"
     :style="`transform: scale(${windowWidth / 500})`"
     >
      {{ word }}
    </view>
  </scroll-view >
  <view class="tip">尺寸：500 * 500</view>
  <view class="config">
    <view class="confit-item">
      <view class="label">文字：</view>
      <input style="color: #565656" class="input-box" placeholder="请输入姓氏" v-model="word" />
    </view>
    <view class="confit-item">
      <view class="label">字体大小：</view>
      <input style="color: #565656" class="input-box" placeholder="请输入姓氏" v-model="fontSize" />
      px
    </view>
   <!-- <view class="confit-item">
      <view class="label">选择字体：</view>
      <input style="color: #565656" class="input-box" placeholder="请输入姓氏" v-model="fontSize" />
      px
    </view> -->
  </view>
  <view class="btn-wrap">
    <button class="ss-reset-button " @click="downLoadOne">下载一张</button>
    <button class="ss-reset-button" @click="draw">开始批量生成</button>
  </view>
	<canvas-drawer v-if="posterAlive" :width="500" :height="500" ref="child"></canvas-drawer>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import canvasDrawer from "@/common/components/canvas-drawer/index.vue";
  import lastNameList from './last-name.js'

	const vk = uni.vk;
	const baseUrl = vk.getVuex('$app.config.staticUrl.baseUrl');

	let poster = ref(null);
	const child = el => poster = el;
	const posterAlive = ref(true);
  
  const windowWidth = ref(375)
  const fontSize = ref(300)
  const currentFont = ref('hanyixiuying')
  let word = ref('杨')

  const downLoadOne = async () => {
    const p = await poster
    	.addRect(0, 0, 500, 500, '#ffffff')
    	.addText(word.value, 90, 50, 300, ...["#000000", undefined, undefined, undefined, currentFont.value, 'bold'])
    	.draw();
    await poster.saveImageToPhotosAlbum(p);
  }
  
	const draw = async () => {
    
    for (var i = 0; i < 5; i++) {
      const name = lastNameList[i]
      const p = await poster
      	.addRect(0, 0, 500, 500, '#ffffff')
      	.addText(name, 90, 50, 300, ...["#000000", undefined, undefined, undefined, 'ff2', 'bold'])
      	.draw();
      console.log('finish draw');
      await poster.saveImageToPhotosAlbum(p);
      console.log('save img');
    }
		
	}

	onLoad(() => {
		const font = 'SourceHanSansCN-Medium'
    const sys = uni.getSystemInfoSync()
    windowWidth.value = sys.windowWidth
    console.log(sys)
		// uni.loadFontFace({
		// 	global: true,
		// 	family: 'ff1',
		// 	source: `url("${baseUrl}/avatar-client/font/${font}.ttf")`,
		// 	success: () => {
		// 		console.log(`加载字体${font}成功`);
		// 	},
		// 	fail(e) {
		// 		console.log('加载字体失败', e, `url("${baseUrl}/avatar-client/font/${font}.ttf")`);
		// 	},
		// 	scopes: ["webview", "native"],
		// })


		const font1 = '汉仪小公主体'
    vk.showLoading('加载中字体...');
		uni.loadFontFace({
			global: true,
			family: 'ff2',
			source: `url("${baseUrl}/avatar-client/font/${font1}.ttf")`,
			success: () => {
				console.log(`加载字体${font1}成功`);
        vk.hideLoading();
			},
			fail(e) {
        vk.alert('加载字体失败');
				console.log('加载字体失败', e, `url("${baseUrl}/avatar-client/font/${font1}.ttf")`);
        vk.hideLoading();
			},
			scopes: ["webview", "native"],
		})
	})
</script>

<style lang="scss" scoped>
  
  @font-face {
    font-family: 'hanyixiuying';
    src: url('https://mp-f94b3c95-ea57-45eb-aad5-8365caef5925.cdn.bspapp.com/avatar-client/font-new/汉仪秀英体简.ttf');
  }
  .preview-wrap {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    background: #fff;
    .preview-inner {
      width: 500px;
      height: 500px;
      line-height: 500px;
      text-align: center;
      font-weight: bold;
      transform-origin: 0 0;
    }
   
  }
  .tip {
    margin-top: 20rpx;
    padding: 0 30rpx;
  }
  .config {
    padding: 30rpx;
    
    .confit-item {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      .label {
        margin-right: 20rpx;
        width: 140rpx;
      }
      .input-box {
        flex: 2;
        height: 30px;
      	border-radius: 6rpx;
      	background: #CDE7FF;
      	padding: 12rpx 6rpx;
      	text-align: center;
      	font-weight: bold;
        margin-right: 20rpx;
      }
    }
  }
  
  .btn-wrap {
    padding: 30rpx;
    
    button {
      margin-bottom: 20rpx;
      color: #fff;
      background: linear-gradient(90deg, #FF9E7D -2.35%, #FF6A60 100%);
    }
  }
  
</style>